<template>
	<div class="outerFrame">
		<div class="search">
			<el-form ref="form" :inline="true" :model="request" label-width="80px">
				<el-form-item label="菜品类型">
					<el-select v-model="request.param.type" placeholder="全部类型">
						<el-option label="主菜" :value="1"></el-option>
						<el-option label="副菜" :value="2"></el-option>
						<el-option label="青菜" :value="3"></el-option>
						<el-option label="主食" :value="4"></el-option>
						<el-option label="其他" :value="5"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="口味">
					<el-select v-model="request.param.isspicy" placeholder="全部口味">
						<el-option label="辣" :value="1"></el-option>
						<el-option label="不辣" :value="2"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="菜品名称">
					<el-input v-model="request.param.title"></el-input>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
					<el-button @click="clearSearchVal">清空</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="operator">
			<el-button type="primary" icon="el-icon-plus" @click="toSave()">添加</el-button>
			<el-button type="danger" icon="el-icon-delete" @click="remove()">批量删除</el-button>
		</div>
		<div class="dataTable" v-if="listData">
			<el-table :data="listData.records" stripe border height="85%" v-loading="listLoading" @selection-change="selectionChange">
				<el-table-column type="selection" width="55" fixed="left"></el-table-column>
				<el-table-column prop="title" label="菜品名称"></el-table-column>
				<el-table-column prop="type" label="类型" :formatter="
						(row, column) => {
							return row.type == 1 ? '主菜' : row.type == 2 ? '副菜': row.type == 3 ? '青菜': row.type == 4 ? '主食':  '其他';
						}">
				</el-table-column>

				<el-table-column prop="pic" label="图片">
					<template slot-scope="scope">
						<el-button type="info" @click="toSee(scope.$index, scope.row)" v-if="scope.row.pic">查看</el-button>
						<el-button type="primary" @click="insert(scope.$index, scope.row)" v-else>添加</el-button>
					</template>
				</el-table-column>

				<el-table-column prop="description" label="描述"></el-table-column>
				<el-table-column prop="remark" label="备注"></el-table-column>
				<el-table-column prop="isspicy" label="口味" :formatter="
						(row, column) => {
							return row.isspicy == 1 ? '辣' : '不辣';
						}
					"></el-table-column>
				<el-table-column prop="limnum" label="限购数量"></el-table-column>
				<el-table-column prop="flike" label="好评率"></el-table-column>
				<el-table-column label="操作" fixed="right" width="200px">
					<template slot-scope="scope">
						<div class="dataTable-operator">
							<el-button size="mini" icon="el-icon-edit" @click="toUpdate(scope.$index, scope.row)">编辑</el-button>
							<el-button size="mini" type="danger" icon="el-icon-delete" @click="remove(scope.$index, scope.row)">删除</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<div class="pageBar">
				<el-pagination @size-change="sizeChange" @current-change="currentChange" :total="listData.total" :page-size="request.page.size"
				 :current-page="request.page.current" :layout="constant.page.layout" :page-sizes="constant.page.pageSizes"></el-pagination>
			</div>
		</div>
		<editDialog :parameter="editParameter" :isDisplay.sync="editDisplay"></editDialog>
		<editPic :parameter="editParameter" :isDisplay.sync="editPic"></editPic>
	</div>
</template>
<script>
	import utils from 'util/utils.js';
	import constant from 'util/constant.js';
	import api from 'api/dishes/dishes/dishes.js';
	import editDialog from './edit.vue';
	import editPic from './pic.vue';
	export default {
		name: 'dishes',
		data() {
			return {
				listLoading: true,
				listData: {},
				editDisplay: false,
				editPic: false,
				editParameter: {},
				constant: constant,
				request: utils.newRequest()
			};
		},
		components: {
			editDialog,
			editPic
		},
		methods: {
			//改变选择项
			selectionChange(val) {
				//清空
				this.request.param.ids = [];
				for (let item of val) {
					this.request.param.ids.push(item.id);
				}
			},
			//改变每页显示数量
			sizeChange(val) {
				this.request.page.size = val;
				this.list();
			},
			//改变现在的页码
			currentChange(val) {
				this.request.page.current = val;
				this.list();
			},
			//获取数据
			list() {

				this.listLoading = true;
				api.list(this.request, response => {
					this.listData = response.data;
					this.listLoading = false;
				});
			},
			//toSee查看图片 修改
			toSee(index, row) {
				this.editPic = true;
				this.editParameter = {
					id: row.id
				};
			},
			//insert添加图片 新增
			insert(index, row) {
				this.editPic = true;
				constant.cacheskey.picId = row.id;
				this.editParameter = {};
			},
			//去添加
			toSave() {
				this.editDisplay = true;
				this.editParameter = {};
			},
			//去编辑
			toUpdate(index, row) {
				this.editDisplay = true;
				this.editParameter = {
					id: row.id
				};
			},
			//删除
			remove(index, row) {
				//单个删除
				if (row) {
					this.request.param.ids = [row.id];
				}
				if (!this.request.param.ids || this.request.param.ids.length == 0) {
					utils.msg.info('请选择至少一行');
					return;
				}
				utils.confirm('确定删除吗？', '提示', () => {
					api.remove(
						this.request,
						response => {
							utils.msg.success(response.msg);
							this.list();
						},
						response => {
							utils.msg.warning(response.msg);
						}
					);
				});
			},

			//搜索
			search() {
				this.request.page.current = 1;
				this.list();
			},
			//清空搜索框
			clearSearchVal() {
				this.request.page.current = 1;
				this.request.param = {};
			}

		},
		mounted() {
			this.list();
		}
	};
</script>

<style lang="scss">
	@import '~common/custom/css/common.scss';
</style>
